<template>
  <div class="flex h-full">
    <a-card class="mr-2" :body-style="{ height: '100%', display: 'flex', flexDirection: 'column' }">
      <!-- <PatientList @select="onSelectPatient" /> -->
      <PatientListCard :selected-item="selectedItem" @select="selectPatient" />
    </a-card>
    <div class="flex flex-col flex-1 overflow-hidden">
      <PatientInfoHeader :patient-info="selectedItem">
        <a-divider type="vertical" :style="{ height: '40px', margin: '0 16px' }" />
        <div>
          <div class="flex items-center">
            <LabelValue label="手术医生" :width="160" :value="selectedItem.aptmDoctorName" />
            <LabelValue label="手术房间" :width="200" :value="selectedItem.oprRoomName" />
            <LabelValue label="一助" :width="140" :value="selectedItem.firstNurseName" />
            <LabelValue label="巡回护士" :width="160" :value="selectedItem.tourNurseName" />
            <LabelValue label="心电监护" :width="100" :value="typeFormat(selectedItem.isEcg)" />
            <LabelValue label="联合手术1" :width="220" :value="selectedItem.jointOprName1" />
            <LabelValue label="嘱托" :width="220" :value="selectedItem.advMemo" />
          </div>
          <div class="flex items-center">
            <LabelValue label="麻醉医生" :width="160" :value="selectedItem.anaesDoctorName" />
            <LabelValue label="麻醉方式" :width="200" :value="selectedItem.anaesName" />
            <LabelValue label="二助" :width="140" :value="selectedItem.secondNurseName" />
            <LabelValue label="器械护士" :width="160" :value="selectedItem.instrumenttNurseName" />
            <LabelValue label="复发" :width="100" :value="typeFormat(selectedItem.isRecurrence)" />
            <LabelValue label="联合手术2" :width="220" :value="selectedItem.jointOprName2" />
            <LabelValue label="特殊要求" :width="220" :value="selectedItem.specRequirements" />
          </div>
        </div>
      </PatientInfoHeader>
      <div class="flex flex-1 mt-2 overflow-hidden">
        <a-card class="flex-1 overflow-hidden" :body-style="{ padding: '0 8px', height: '100%', overflow: 'hidden' }">
          <div class="flex justify-between mt-2">
            <div class="flex">
              <a-radio-group v-model:value="tabsKey" button-style="solid" :disabled="!selectedItem.inplsh" @change="getData">
                <a-radio-button :value="0">补记账</a-radio-button>
                <a-radio-button :value="2">全部已记账</a-radio-button>
              </a-radio-group>
              <a-input-search
                v-if="tabsKey === 0"
                v-model:value="formState.pyjm"
                allow-clear
                :disabled="!selectedItem.inplsh"
                class="ml-2 w-56 mr-4"
                placeholder="项目名称/助记码"
                @search="getData"
              />
              <div v-if="tabsKey === 0" class="flex items-center ml-4">
                <a-radio-group v-model:value="formState.timeType" :disabled="!selectedItem.inplsh" @change="getData">
                  <a-radio :value="0">全部</a-radio>
                  <a-radio :value="1">今日执行</a-radio>
                </a-radio-group>
              </div>
            </div>
          </div>
          <Unbooked v-if="tabsKey === 0" ref="unBookedRef" :selected-item="selectedItem" :form-state="formState" />
          <Booked v-if="tabsKey === 2" ref="bookedRef" :selected-item="selectedItem" :form-state="formState" />
        </a-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import PatientInfoHeader from '@/components/business/PatientInfoHeader'
import LabelValue from '@/components/LabelValue'
import Unbooked from './components/Unbooked.vue'
import Booked from './components/Booked.vue'
import PatientListCard from './components/PatientListCard'

const tabsKey = ref(0)
const selectedItem = ref({})
const unBookedRef = ref(null)
const bookedRef = ref(null)
const formState = ref({
  pyjm: '',
  timeType: 1,
  accountType: 4
})

//选中的数据
const selectPatient = (patient) => {
  selectedItem.value = patient
  getData()
}
const typeFormat = (type) => {
  // 0:未选中|1：已选中
  if (type === 0) {
    return '否'
  } else if (type === 1) {
    return '是'
  } else {
    return ''
  }
}

//获取数据
const getData = async () => {
  setTimeout(function () {
    if (tabsKey.value === 0) unBookedRef.value?.getData()
    if (tabsKey.value === 2) bookedRef.value?.getData()
  }, 100)
}
</script>
<style lang="less" scoped>
.bg-color {
  background: var(--thin-color);
}
:deep(.ant-table-row-expand-icon) {
  display: none;
}
.classify-checkall {
  .ant-tag {
    font-size: 14px;
    line-height: 30px;
    padding-inline: 14px;
  }
}
</style>
